import React, { Component } from 'react'
import Header from '../../components/Header'
import ShowCoupon from './compoments/ShowCoupon/ShowCoupon'
import './Coupon.less'
// 改为容器型组件
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { actions, getList, getN, getShowList } from '../../store/modules/coupon'
class Coupon extends Component {
    componentDidMount() {
        // 一进页面就调用
        let { coupon: { reqListAction },} = this.props
        reqListAction()
    }
    render() {
        let { n, coupon: { reqListAction, changeN }  ,showList } = this.props
        return (
            <div className="cou_bg">
                {/* 头部组件 */}
                <Header title="我的优惠券" back></Header>
                {/* 子组件 4.传给子组件 */}
                {/*   {
                list.length > 0 ? <ShowCoupon listShow={list[n].content} n={n} setN ={(e)=>setN(e)}></ShowCoupon> : null
            } */}

                <ShowCoupon n={n} listShow={showList} changeN={(index) => changeN(index)}></ShowCoupon>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        list: getList(state),
        n: getN(state),
        showList: getShowList(state)
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        coupon: bindActionCreators(actions, dispatch)

    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Coupon)
